<template>
    <view>
		<view class="search_box">
			<view class="search">
				<u-search @custom="custom" @clickIcon="clickIcon" @focus="focus" placeholder="点击搜索" v-model="keyword" :show-action="true" actionText="搜索"></u-search>
			</view>
		</view>
		<view class="u-demo-block" v-if="isShow">
			<u-swiper
					:list="list"
					previousMargin="30"
					nextMargin="30"
					circular
					:autoplay="true"
					:interval=4000
					radius="5"
					bgColor="#ffffff"
			></u-swiper>
		</view>
		<view class="u-demo-block">
			<uni-grid :column="4" :showBorder="false"  :square="true">
				<uni-grid-item>
					<image class="icon_img" src="@/static/images/skillImages/java.svg"></image>
					<text class="menu_text">JAVA</text>
				</uni-grid-item>
				<uni-grid-item>
					<image class="icon_img" src="@/static/images/skillImages/vue.svg"></image>
					<text class="menu_text">Vue</text>
				</uni-grid-item>
				<uni-grid-item>
					<image class="icon_img" src="@/static/images/skillImages/linux.svg"></image>
					<text class="menu_text">Linux</text>
				</uni-grid-item>
				<uni-grid-item>
					<image class="icon_img" src="@/static/images/skillImages/yuanxing.svg"></image>
					<text class="menu_text">Redis</text>
				</uni-grid-item>
				<uni-grid-item>
					<image class="icon_img" src="@/static/images/skillImages/PS.svg"></image>
					<text class="menu_text">PS</text>
				</uni-grid-item>
				<uni-grid-item>
					<image class="icon_img" src="@/static/images/skillImages/js.svg"></image>
					<text class="menu_text">JavaScript</text>
				</uni-grid-item>
				<uni-grid-item>
					<image class="icon_img" src="@/static/images/skillImages/yuanxing.svg"></image>
					<text class="menu_text">原型模型</text>
				</uni-grid-item>
				<uni-grid-item>
					<image class="icon_img" src="@/static/images/skillImages/moshi.svg"></image>
					<text class="menu_text">素质教育</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="font_size">推荐课程</view>
		<view class="course">
			<uni-grid :column="2" :showBorder="false" :square="true">
				<uni-grid-item v-for="(item,index) in courseList">
					<image @click="clickCourse(item.courseId,item.userId)" class="icon_course_img" :src="item.url" style="border-top-left-radius: 20px;border-top-right-radius: 20px;"></image>
					<view @click="clickCourse(item.courseId,item.userId)" class="min_box" style="border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;">
						<view class="course_title">
							<text class="text">{{item.courseName}}</text>
						</view>
						<view class="over">
							<view class="left teacher_font">{{item.trueName}}主讲</view>
							<view class="right money_font">￥{{item.courseNprice}}</view>
						</view>
						<view class="bottom_box_padding">
							<view class="left bottom_box">
								<image class="min_icon_img left" src="@/static/images/index/eye.png"></image>
								<view class="left num_font">{{item.lookNum}}</view>
							</view>
							<view class="left bottom_box">
								<image class="min_icon_img left" src="@/static/images/index/user.png"></image>
								<view class="left num_font">{{item.saleNum}}</view> 
							</view>
						</view>
					</view>
				</uni-grid-item>
				<u-loadmore :status="status" :loadmoreText='loadmoreText'/>
			</uni-grid>
		</view>
    </view>
</template>

<script>	
	//查看轮播图
	import {getJsCarousels} from '@/static/http/getData.js'
	//查看课程
	import {getCourses} from '@/static/http/getData.js'
	//上传图片
	import {uploadImages} from '@/static/http/upGetData.js'
	
	export default {
	    data() {
	        return { 
				fileList1: [],
				//搜索关键字
				keyword: '',
				//用户信息
				beforeUser: '',
				//导航栏列表
				list: [],
				//课程列表
				courseList:[], 
				//加载状态1
				status: 'loadmore',
				//加载前的提示语
				loadmoreText: '上拉加载更多',
				//当前页
				currentPage: 1,
				//总页数
				pages: 1,
				//每页展示几条数据
				pageSize: 4,
				isShow: true,
	        }
	    },
		//监听页面加载
		onLoad() {
			this.beforeUser = JSON.parse(uni.getStorageSync('beforeUser'));
			this.getJsCarousels();
			this.getCourse(this.currentPage,this.pageSize);
		},
		//监听下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				//刷新页面
				this.isShow = false;
				this.courseList = [];
				this.list = [];
				this.currentPage = 1;
				this.pages = 1;
				this.getJsCarousels();
				//DOM更新渲染后执行
				this.$nextTick(function(){
					this.isShow = true;
				})
				this.getCourse(this.currentPage, this.pageSize);
				//停止下拉刷新动画
				uni.stopPullDownRefresh();
			},1000)
		},
		//页面划到底部触发
		onReachBottom(){
			if(this.currentPage >= this.pages) return;
			this.status = 'loading';
			//当前页码自增一页
			this.currentPage++;
			setTimeout(() => {
				this.getCourse(this.currentPage, this.pageSize);
			},1000)
		},
		methods: {
			//点击搜索跳转搜索页面
			custom(){
				uni.$u.toast('点击了右侧图标');
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			clickIcon(){
				uni.$u.toast('点击了左侧图标');
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			focus(){
				uni.$u.toast('输入框获焦');
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			getCourse(currentPage,pageSize){
				getCourses({currentPage: currentPage,pageSize: pageSize}).then(res => {
					var data = res.data.data;
					for (var i = 0; i < data.length; i++) {
						var params = {
							url:'/static/images/index/01.png',
							courseName: data[i].courseName,
							trueName: data[i].trueName,
							courseNprice: data[i].courseNprice,
							lookNum: data[i].lookNum,
							saleNum: data[i].saleNum,
							courseId: data[i].courseId,
							userId: data[i].userId
						}
						this.courseList.push(params);
					}
					if(data.length == 4){
						this.pages++;
					}
					if(this.currentPage >= this.pages){
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
				})
			},
			getJsCarousels(){
				getJsCarousels().then(res => {
					var data = res.data.data;
					for (var i = 0; i < data.length; i++) {
						this.list.push({url:data[i].imgAddress});
					}
				})
			},
			//跳转课程详情
			clickCourse(courseId,userId){
				uni.navigateTo({
					url: '/pages/index/course_details?courseId='+ courseId + '&userId=' + userId+'',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
		//text-align: center;
	}
	#box {
		width: 96%;
		margin: 0 auto;
		text-align: center;
		//border: 1px solid red; 
	}
	.search_box{
		width: 100%;
		background-color: #FFFFFF;
	}
	.search{
		width: 97%;
		padding: 2% 0%;
		margin: 0 auto;
	}
	.u-demo-block{
		width: 100%;
		background-color: #FFFFFF;
		margin: 2% 0;
		padding: 2% 0;
		text-align: center;
	}
	.icon_img{
		width: 40px;
		height: 40px;
		margin: 10% auto;
		padding-bottom: 5%;
		//border: 1px solid blue;
	}
	.course{
		margin: 2% 0;
		padding: 2% 0;
	}
	.font_size{
		width: 80px;
		font-size: 20px;
		font-weight: bold;
		margin: 5% auto;
	}
	.icon_course_img{
		width: 90%;
		padding-bottom: 2%;
		margin: 0 auto;
		background-color: #FFFFFF;
	}
	.min_icon_img{
		width: 15px;
		height: 15px;
		padding-right: 10px;
	}
	.bottom_box{
		height: 15px;
		line-height: 15px;
		padding-right: 10px;
	}
	.bottom_box_padding{
		overflow: hidden;
		padding: 5% 0;
		//border: 1px solid red;
	}
	.min_box{
		width:85%;
		padding: 0 5px;
		margin: 0 auto;
		margin-bottom: 7%;
		background-color: #FFFFFF;
	}
	.course_title{
		height: 45px;
	}
	.left{
		float: left;
	}
	.right{
		float: right;
	}
	.over{
		overflow: hidden;
		//border: 1px solid red;
	}
	.menu_text{
		font-size: 16px;
		//font-weight: bold;
		color: #B6B4BD;
	}
	.text{
		font-size: 15px;
	}
	.teacher_font{
		color: #CACACA;
	}
	.money_font{
		color: #F86802;
	}
	.num_font{
		color: #7A7A7A;
	}
</style>
